<template>
  <div class="Lineas">
    <div id="Lineas" style="width: 100%; height: 350px"></div>
    <div class="week-month-year">
      <div class="item" @click="week">周</div>
      <div class="item"  @click="month">月</div>
      <div class="item"  @click="year">年</div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { getarea, getAreas } from "@/api/article";
export default {
  data() {
    return {
      area: [],
    };
  },
  async beforeCreate() {
    const area = await getarea(
      "1",
      moment(moment().week(moment().week()).startOf("week").valueOf()).format(
        "YYYY-MM-DD"
      ),
      moment(moment().valueOf()).format("YYYY-MM-DD")
    );
    const Areas = await getAreas(
      moment(moment().week(moment().week()).startOf("week").valueOf()).format(
        "YYYY-MM-DD"
      ),
      moment(moment().valueOf()).format("YYYY-MM-DD")
    );
    const data = area;
    const data1 = Areas;
    await this.myEcharts(data, data1);
  },
  name: "Lineas",
  methods: {
    async week() {
      const area = await getarea(
        "1",
        moment(moment().week(moment().week()).startOf("week").valueOf()).format(
          "YYYY-MM-DD"
        ),
        moment(moment().valueOf()).format("YYYY-MM-DD")
      );
      const Areas = await getAreas(
        moment(moment().week(moment().week()).startOf("week").valueOf()).format(
          "YYYY-MM-DD"
        ),
        moment(moment().valueOf()).format("YYYY-MM-DD")
      );
      const data = area;
      const data1 = Areas;
      console.log(data,data1);
      await this.myEcharts(data, data1);
    },
    async month() {
      const area = await getarea(
        "1",
        moment(
          moment().month(moment().month()).startOf("month").valueOf()
        ).format("YYYY-MM-DD"),
        moment(moment().valueOf()).format("YYYY-MM-DD")
      );
      const Areas = await getAreas(
        moment(
          moment().month(moment().month()).startOf("month").valueOf()
        ).format("YYYY-MM-DD"),
        moment(moment().valueOf()).format("YYYY-MM-DD")
      );
      const data = area;
      const data1 = Areas;
      await this.myEcharts(data, data1);
    },
    async year() {
      console.log(
        moment(moment().year(moment().year()).startOf("year").valueOf()).format(
          "YYYY/MM/DD"
        ),
        moment(moment().valueOf()).format("YYYY/MM/DD")
      );
      const area = await getarea(
        "2",
        moment(moment().year(moment().year()).startOf("year").valueOf()).format(
          "YYYY-MM-DD"
        ),
        moment(moment().valueOf()).format("YYYY-MM-DD")
      );
      const Areas = await getAreas(
        moment(moment().year(moment().year()).startOf("year").valueOf()).format(
          "YYYY-MM-DD"
        ),
        moment(moment().valueOf()).format("YYYY-MM-DD")
      );
      const data = area;
      const data1 = Areas;
      await this.myEcharts(data, data1);
    },
    myEcharts(data, data1) {
      const myChart = this.$echarts.init(document.getElementById("Lineas"));
      // 配置图表
      console.log(data1);
      const option = {
        color: ["rgba(50, 229, 255, 1)", "rgba(250, 207, 18, 1)"],
        legend: {},
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "skyblue",
            },
          },
        },
        xAxis: [
          {
            type: "category",
            data: data.xAxis,
            gridIndex: 0,
            axisLine: {
              show: true,
              lineStyle: {
                color: "skyblue",
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "blue",
                width: 1,
                type: "solid",
              },
            },
            axisPointer: {
              type: "shadow",
            },
          },
          {
            type: "category",
            data: data1.xAxis,

            gridIndex: 1,
            axisLine: {
              show: true,
              lineStyle: {
                color: "skyblue",
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "blue",
                width: 1,
                type: "solid",
              },
            },
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            gridIndex: 0,
            axisLabel: {
              color: "skyblue",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "skyblue",
              },
            },
            splitLine: {
              lineStyle: {
                color: "skyblue",
                width: 1,
                type: "solid",
              },
            },
            nameTextStyle: {
              rich: {
                legend: {
                  width: 12,
                  height: 4,
                  backgroundColor: "skyblue",
                },
                value: {
                  color: "skyblue",
                },
              },
            },
          },
          {
            gridIndex: 1,
            type: "value",

            axisLabel: {
              color: "skyblue",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "skyblue",
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "blue",
                width: 1,
                type: "solid",
              },
            },
            nameTextStyle: {
              rich: {
                legend: {
                  width: 12,
                  height: 4,
                  backgroundColor: "skyblue",
                },
                value: {
                  color: "skyblue",
                },
              },
            },
          },
        ],
        grid: [
          { right: "55%", top: "20%", left: "8%" },
          { top: "20%", left: "55%", right: "0%" },
        ],
        series: [
          // These series are in the first grid.
          {
            type: "line",
            smooth: true,
            data: data.series,

            seriesLayoutBy: "row",
            itemStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "rgba(255, 192, 203)",
                },
                {
                  offset: 1,
                  color: "rgba(250, 207, 18)",
                },
              ]),
            },
            areaStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "rgba(255, 192, 203)",
                },
                {
                  offset: 1,
                  color: "rgba(250, 207, 18)",
                },
              ]),
            },
            showSymbol: false,
          },
          {
            type: "bar",
            data: data1.series,

            xAxisIndex: 1,
            yAxisIndex: 1,
            barWidth: 14,
            itemStyle: {
              borderRadius: 3,
              color: this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: "rgba(255, 192, 203,0.8)" },
                { offset: 1, color: "rgba(255, 192, 203,0.5)" },
              ]),
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style>
.week-month-year {
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.item {
  text-align: center;
  width: 37px;
  height: 25px;
  font-size: 14px;
  color: #9ca3b4;
  cursor: pointer;
}
</style>
